<template>
	<view class="e-checkbox-group" :class="[ns.m(props.placement ? 'placement':undefined)]">
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * checkboxGroup 复选框组
	 * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
	 * @tutorial https://www.uviewui.com/components/checkbox.html
	 * @property {String}			name			标识符
	 * @property {Array}			value			绑定的值
	 * @property {String}			shape			形状，circle-圆形，square-方形 （默认 'square' ）
	 * @property {Boolean}			disabled		是否禁用全部checkbox （默认 false ）
	 * @property {String}			activeColor		选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 （默认 '#2979ff' ）
	 * @property {String}			inactiveColor	未选中的颜色 （默认 '#c8c9cc' ）
	 * @property {String | Number}	size			整个组件的尺寸 单位px （默认 18 ）
	 * @property {String}			placement		布局方式，row-横向，column-纵向 （默认 'row' ）
	 * @property {String | Number}	labelSize		label的字体大小，px单位  （默认 14 ）
	 * @property {String}			labelColor		label的字体颜色 （默认 '#303133' ）
	 * @property {Boolean}			labelDisabled	是否禁止点击文本操作 (默认 false )
	 * @property {String}			iconColor		图标颜色 （默认 '#ffffff' ）
	 * @property {String | Number}	iconSize		图标的大小，单位px （默认 12 ）
	 * @property {String}			iconPlacement	勾选图标的对齐方式，left-左边，right-右边  （默认 'left' ）
	 * @property {Boolean}			borderBottom	placement为row时，是否显示下边框 （默认 false ）
	 * @event {Function}	change	任一个checkbox状态发生变化时触发，回调为一个对象
	 * @event {Function}	input	修改通过v-model绑定的值时触发，回调为一个对象
	 * @example <e-checkbox-group></e-checkbox-group>
	 */
	export default defineComponent({
		name: 'e-checkbox-group',
		mixins: [mpMixin]
	})
</script>

<script lang="ts" setup>
	import {
		reactive,
		watch,
		provide,
		toRefs,
		nextTick
	} from 'vue'
	import {
		checkboxGroupProps,
		checkboxGroupEmits
	} from './props';
	import {
		type CheckboxGroupContext,
		type CheckboxContext,
		checkboxGroupContextKey
	} from '../../libs/tokens'
	import {
		useNamespace,
		useFormItem,
		useDisabled,
		useDefaultProps
	} from '../../libs/hooks'
	import componentsProps from "../../libs/config/componentsProps";
	import type {
		 CheckboxGroupProps
	} from "../../libs/config/propsType";
	
	const { checkboxGroup: checkboxGroupDefaultProps } = toRefs(componentsProps);
	const _props = defineProps(checkboxGroupProps)
	
	const props = useDefaultProps <CheckboxGroupProps> (_props, checkboxGroupDefaultProps);
	const emit = defineEmits(checkboxGroupEmits)

	const ns = useNamespace('checkbox-group')
	const {
		form,
		formItem
	} = useFormItem()

	const children: CheckboxContext[] = []

	const addField: CheckboxGroupContext['addField'] = (field) => {
		children.push(field)
	}

	const removeField: CheckboxGroupContext['removeField'] = (field) => {
		let index = children.indexOf(field)
		if (index > -1) {
			children.splice(index, 1)
		}
	}

	const init = () => {
		if (children.length) {
			children.map(child => {
				// 判断子组件(e-checkbox)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
				typeof(child.init) === 'function' && child.init()
			})
		}
	}

	// 是否禁用，如果form组件禁用的话，将会忽略当前组件的配置
	const elDisabled = useDisabled()

	watch(() =>[elDisabled.value, props.value.inactiveColor, props.value.activeColor, props.value.size, props.value.labelDisabled, props.value.shape,
		props.value.iconSize, props.value.borderBottom, props.value.placement
	], () => {
		init()

	})
	watch(() => props.value.modelValue, () => {
		// 尝试调用e-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
		nextTick(() => {
			init()
			// 如果checkbox-group是在form组件内，调用form组件的validateField
			if (formItem && form) {
				form.validateField([formItem.props.prop!], () => {}, 'change')
			}
		})
	},{
		deep:true
	})

	// 将其他的checkbox设置为未选中的状态
	const unCheckedOther = () => {
		// 将被选中的checkbox，放到数组中返回
		const values = children.filter(child => child.isChecked) .map(child => child.props.name)
		
		emit('change', values)
		emit('update:modelValue', values)
	}

	provide(checkboxGroupContextKey, reactive({
		props,
		addField,
		removeField,
		unCheckedOther
	}))
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/checkbox-group.scss";
</style>
